<style include="cr-shared-style settings-shared">
  cr-dialog::part(dialog) {
    width: 320px;
  }

  #passwordPrompt {
    padding-bottom: 20px;
    padding-inline-end: 0;
    padding-inline-start: 0;
  }
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
  <div slot="title">$i18n{passwordPromptTitle}</div>
  <div slot="body">
    <div id="passwordPrompt" class="cr-row first"
        hidden="[[!passwordPromptText]]">
      [[passwordPromptText]]
    </div>
    <cr-input id="passwordInput" type="password"
        placeholder="$i18n{passwordPromptPasswordLabel}"
        invalid="[[passwordInvalid_]]"
        error-message="$i18n{passwordPromptInvalidPassword}"
        value="{{inputValue_}}"
        aria-disabled="false">
    </cr-input>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" on-click="onCancelTap_">
      $i18n{cancel}
    </cr-button>

    <cr-button id="confirmButton" class="action-button"
        disabled$="[[!isConfirmEnabled_(inputValue_, passwordInvalid_,
            waitingForPasswordCheck_)]]"
        on-click="submitPassword_">
      $i18n{confirm}
    </cr-button>
  </div>
</cr-dialog>
